<template>
<div>
    <header-nav></header-nav>
    <bread-nav></bread-nav>
<div class="exam">
    <label for="">双向绑定实例：</label>
    <input type="text" v-model="message">
    <b>{{ message }}</b> 
</div>
<div class="accessory-result-page">
    <div class="container">
        <div class="filter-nav">
            <span class="sortby">排序:</span>
            <a href="javascript:void(0)" class="default cur">默认</a>
            <a href="javascript:void(0)" class="price">价格 <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
            <a href="javascript:void(0)" class="filterby">筛选</a>
        </div>
        <div class="accessory-result">
            <!-- filter -->
            <div class="filter" id="filter">
                <dl class="filter-price">
                    <dt>价格区间:</dt>
                    <dd><a href="javascript:void(0)">选择价格</a></dd>
                    <dd>
                        <a href="javascript:void(0)">￥ 0 - 100 元</a>
                    </dd>
                </dl>
            </div>

            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
                <div class="accessory-list col-4">
                    <ul>
                        <li v-for="item in goods" :key="item.productId">
                            <div class="pic">
                                <a href="#"><img v-bind:src="`static/${item.productImage}`" alt=""></a>
                            </div>
                            <div class="main">
                                <div class="name">{{item.productName}}</div>
                                <div class="price">{{item.salePrice}}</div>
                                <div class="btn-area">
                                    <a href="javascript:;" class="btn btn--m">加入购物车</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<footer-nav></footer-nav>
</div>
</template>

<script>
import "../assets/css/base.css";
import "../assets/css/nav-header.css";
import "../assets/css/nav-bread.css";
import "../assets/css/nav-footer.css";
import "../assets/css/goods-list.css";

import headerNav from "../components/headerNav";
import breadNav from "../components/breadNav";
import footerNav from "../components/footerNav";

import axios from "axios";
export default {
    name: 'goodsList',
    data () {
        return {
            goods:[],
            message:"1"
        }
    },
    mounted () {
        this.getGoodsList();
    },
    methods: {
        getGoodsList(){
            axios.get("http://192.168.1.117:80/goods").then((res)=>{
                this.goods = res.data.result;
            })
            // axios.get("http://localhost:3000/goods/list?page=1&pageSize=8&sort=1&priceLevel=all").then((res)=>{
            //     this.goods = res.data.result.list;
            // })
        }
    },
    components: {
        headerNav,
        breadNav,
        footerNav
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.exam{
    margin-top: 20px;
}
label{
    margin-left: 320px;
}
</style>
